<template>
  <div class="bucket-container">
    <div class="bucket-navbar-container">
      <div class="search-container">
        <el-input
          v-model="state"
          placeholder="请输入文件名或编码"
          prefix-icon="el-icon-search"
          value-key="value"
          @focus="getSearch"
        />
      </div>
      <el-menu class="bucket-menu" :router="true" :default-active="index">
        <el-menu-item index="/document/my_repository">
          <i class="iconfont el-icon-allzhishiku" />
          <span slot="title">个人知识库</span>
        </el-menu-item>
        <el-menu-item-group>
          <template slot="title">团队</template>
          <el-menu-item
            v-for="item in teamList"
            :key="item.teamId"
            :index="'/document/repository/' + item.teamId"
          >
            <i class="iconfont el-icon-alltuanduiguanli" />
            <span slot="title">{{ item.teamName }}</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">快捷访问</template>
          <el-menu-item index="/document/recent">
            <i class="el-icon-time" />
            <span slot="title">最近访问</span>
          </el-menu-item>
          <!-- <el-menu-item index="/document/tag">
            <i class="el-icon-price-tag"></i>
            <span slot="title">文件标签</span>
          </el-menu-item> -->
          <el-menu-item index="/document/favorite">
            <i class="el-icon-star-off" />
            <span slot="title">我的收藏</span>
          </el-menu-item>
          <el-menu-item index="/document/share_to">
            <i class="iconfont el-icon-allziyuan-copy-copy" />
            <span slot="title">我的分享</span>
          </el-menu-item>
          <el-menu-item index="/document/share_from">
            <i class="iconfont el-icon-allziyuan-copy" />
            <span slot="title">分享我的</span>
          </el-menu-item>
          <!-- <el-menu-item index="/document/collaboration_to">
            <i class="el-icon-d-arrow-right" />
            <span slot="title">我的协作邀请</span>
          </el-menu-item>
          <el-menu-item index="/document/collaboration_from">
            <i class="el-icon-d-arrow-left" />
            <span slot="title">邀请我协作的</span>
          </el-menu-item> -->

          <el-menu-item
            index="/document/flow_standingBook _file"
            v-if="this.sign == 1"
          >
            <i class="el-icon-document-copy" />
            <span slot="title">台账文件</span>
          </el-menu-item>
          <el-menu-item index="/document/recycle_bin">
            <i class="el-icon-delete" />
            <span slot="title">回收站</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </div>
    <div class="bucket-main-container">
      <router-view v-if="isReloadAlive" />
    </div>
    <el-dialog title="搜索" :visible.sync="searchDialogVisible" width="70%">
      <el-input
        v-input
        ref="input"
        v-model="state"
        placeholder="请输入文件名或编码"
        prefix-icon="el-icon-search"
        value-key="value"
        @input="getSearchData"
      />
      <template>
        <el-table :data="searchData" height="300" @row-click="open">
          <el-table-column prop="documentName" label="名称">
            <template slot-scope="scope">
              <span v-if="scope.row.folderName"
                ><svg class="icon" aria-hidden="true">
                  <use
                    :xlink:href="iconType(scope.row.fileExtension).class"
                  ></use>
                </svg>
                {{ scope.row.folderName }}</span
              >
              <span
                @click.native="open(scope.row)"
                v-if="scope.row.documentName"
                ><svg class="icon" aria-hidden="true">
                  <use
                    :xlink:href="iconType(scope.row.fileExtension).class"
                  ></use></svg
                >{{ scope.row.documentName }}{{ scope.row.fileExtension }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="location"
            label="来源位置"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column prop="accessTimeString" label="修改时间">
          </el-table-column>
        </el-table>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="off">关闭</el-button>
        <!-- <el-button type="primary" @click="off">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listJoined } from '@/api/uc/team'
import { fuzzySearchDocument } from '@/api/fd/document.js'
import { unity } from '@/styles/js/setIconType.js'
import { mapGetters } from 'vuex'

export default {
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      iconType: unity.setIconType,
      isReloadAlive: true,
      index: '/document/repository',
      teamList: null,
      listQuery: {},
      state: '',
      timeout: '',
      restaurants: [],
      searchDialogVisible: false,
      searchData: [],
      sign: ''
    }
  },
  mounted() {
    this.getList()
    this.index = this.defaultActive()
    if (this.$route.name === 'repository') {
      this.index = this.$route.path
    } else if (this.index.indexOf('team') !== -1) {
      const row = this.$route.query.row
      this.index = '/document/repository/' + row.belongTo
    }
    this.disposeData(this.roles)
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    defaultActive() {
      let pathName = this.$route.meta.defaultActive
      if (this.$route.path.indexOf('my_repository') !== -1) {
        pathName = '/document/my_repository'
      }
      return pathName
    },
    getList() {
      listJoined(this.listQuery).then((response) => {
        this.teamList = response.data
        // if (this.teamList) {
        //   this.teamList.forEach((element) => {
        //     element.userGroupNameAbbr =
        //       element.userGroupName.length > 6
        //         ? element.userGroupName.substring(0, 6) + '...'
        //         : element.userGroupName
        //   })
        // }
      })
    },
    getSearch(value) {
      this.searchDialogVisible = true
    },
    getSearchData(value) {
      console.log(value, 'value')
      let pushdata = {
        keyword: value
      }
      clearTimeout(this.timeout)
      if (!pushdata.keyword.replace(/(^\s*)|(\s*$)/g, '') == '') {
        this.timeout = setTimeout(() => {
          fuzzySearchDocument(pushdata).then((res) => {
            console.log(res)
            this.searchData = res.data
          })
        }, 1000 * Math.random())
      }
    },
    open(row, column, event) {
      console.log(row, 'row')
      if (row.documentId) {
        window.open(
          'onlyoffice/createDocument.html?&token=' +
            this.$store.getters.token +
            '&documentId=' +
            row.documentId +
            '&mode=view' +
            '&urldata=' +
            process.env.VUE_APP_BASE_API
        )
      } else {
        let i = row.location.indexOf(':')
        let location = row.location.slice(0, i)
        this.$router.push({
          path: '/document/file/' + row.repositoryId,
          query: {
            location: location
          }
        })
      }
      console.log(row, 'row, column, event')

      this.searchDialogVisible = false
      this.state = ''
    },
    off() {
      this.searchDialogVisible = false
      this.state = ''
    },
    disposeData(roles) {
      roles.forEach((item) => {
        if (item === 'qa') {
          this.sign = 1
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-menu-item {
  clear: both;

  .pull-right {
    float: right;
    line-height: 2.6em;
  }
}
</style>
